<template>
    <div id="checkin_page">
        <el-row :gutter="25" class="avatar-contain">
            <el-col :span="3" v-for="item in userListBg">
                <img :src="item.head_img" class="avatar" alt="" width="100%" height="100%">
                <p class="name">{{item.name}}</p>
            </el-col>
        </el-row>
        <transition name="el-fade-in-linear">
            <div class="check-in-contain" v-show="ifCheckIn">
                <img :src="checkInUser" class="avatar" alt="" width="30%" height="100%">
            </div>
        </transition>
        <div class="qr-code">
            <img src="../assets/images/background/qrcode.jpg" alt="" height="100%">
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                checkInUser: '',
                ifCheckIn: false,
                // 飞出效果数组
                userListOut: [],
                // 背景板数组
                userListBg: [],
                interval: ''
            }
        },
        mounted: function () {
            let ifFirst = true // 初次请求
            let lengthTemp = 0
            // 获取签到者列表
            this.$http.get('/api/signs').then(response => {
                if (response.data.users && (response.data.users.length > 0) && (response.data.users.length > lengthTemp)) {
                    // 初次请求，给飞出效果数组赋值
                    if (ifFirst) {
                        this.userListOut = response.data.users.reverse()
                        ifFirst = false
                    } else {
                        this.userListOut = response.data.users.slice(0, response.data.users.length - lengthTemp).reverse()
                    }
                    lengthTemp = response.data.users.length

                    const fadeOut = setInterval(() => {
                        if (this.userListOut[0] && this.userListOut[0].head_img) {
                            this.checkInUser = this.userListOut[0].head_img
                        } else {
                            this.checkInUser = 'http://test3.chenxinliuyi.com/pc/images/who.png'
                        }
                        this.ifCheckIn = true
                        setTimeout(() => {
                            this.ifCheckIn = false
                            if (this.userListOut[0] && this.userListOut[0].head_img) {
                                this.userListBg.unshift(this.userListOut[0])
                            } else {
                                this.userListOut[0].head_img = 'http://test3.chenxinliuyi.com/pc/images/who.png'
                                this.userListBg.unshift(this.userListOut[0])
                            }

                            this.userListOut.splice(0, 1)
                            console.log(this.userListOut.length)
                            if (this.userListOut.length === 0) {
                                console.log(this.userListOut.length === 0)
                                clearInterval(fadeOut)
                            }
                        }, 2500)
                    }, 5000)
                }
            }, response => {
                console.log(response)
            })
            this.interval = setInterval(() => {
                // 获取签到者列表
                this.$http.get('/api/signs').then(response => {
                    if (response.data.users && (response.data.users.length > 0) && (response.data.users.length > lengthTemp)) {
                        // 初次请求，给飞出效果数组赋值
                        if (ifFirst) {
                            this.userListOut = response.data.users.reverse()
                            ifFirst = false
                        } else {
                            this.userListOut = response.data.users.slice(0, response.data.users.length - lengthTemp).reverse()
                        }
                        lengthTemp = response.data.users.length

                        const fadeOut = setInterval(() => {
                            if (this.userListOut[0] && this.userListOut[0].head_img) {
                                this.checkInUser = this.userListOut[0].head_img
                            } else {
                                this.checkInUser = 'http://test3.chenxinliuyi.com/pc/images/who.png'
                            }
                            this.ifCheckIn = true
                            setTimeout(() => {
                                this.ifCheckIn = false
                                if (this.userListOut[0] && this.userListOut[0].head_img) {
                                    this.userListBg.unshift(this.userListOut[0])
                                } else {
                                    this.userListOut[0].head_img = 'http://test3.chenxinliuyi.com/pc/images/who.png'
                                    this.userListBg.unshift(this.userListOut[0])
                                }

                                this.userListOut.splice(0, 1)
                                console.log(this.userListOut.length)
                                if (this.userListOut.length === 0) {
                                    console.log(this.userListOut.length === 0)
                                    clearInterval(fadeOut)
                                }
                            }, 2500)
                        }, 5000)
                    }
                }, response => {
                    console.log(response)
                })
            }, 10000)
        },
        beforeDestroy() {
            clearInterval(this.interval)
        }
    }
</script>

<style scoped>
    #checkin_page {
        width: 100%;
        height: 100%;
        background: url("../assets/images/background/check-in.jpg");
        background-size: 100% 100%;
    }

    .avatar-contain {
        position: absolute;
        width: 60%;
        top: 6%;
        right: 5%;
        height: 88%;
        padding: 3rem 1rem;
        background: rgba(226, 177, 108, .5);
        border-radius: 1rem;
        overflow: hidden;
    }

    .avatar-contain .avatar {
        border-radius: 50%;
        overflow: hidden;
    }

    .avatar-contain .name {
        text-align: center;
        font-size: 1.2rem;
        color: #373737;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .check-in-contain {
        position: absolute;
        width: 60%;
        top: 30%;
        right: 4%;
        text-align: center;
    }

    .check-in-contain .avatar {
        border: .8rem solid #4F1B0E;
        border-radius: 50%;
        overflow: hidden;
    }

    .check-in-contain .name {
        text-align: center;
        font-size: 5rem;
        font-weight: bold;
        color: #4F1B0E;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qr-code {
        position: absolute;
        width: 22%;
        height: 35%;
        bottom: 7%;
        left: 6.5%;
        text-align: center;
    }
</style>
